<template>
	<view class="poster-score-wrapper">
		<image v-for="yellow in yellowStarCount" :key="yellow+10"
			src="../../static/icos/star-yellow.png" 
			class="star-ico"></image>
		<image v-for="grey in greyStarCount" :key="grey"
			src="../../static/icos/star-gray.png" 
			class="star-ico"></image>
		<view class="poster-score" v-if="showNum > 0">
			{{score}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yellowStarCount: 0, // 显示黄色星星个数
				greyStarCount: 0 // 灰色星星个数
			}
		},
		// vue生命周期，created
		created(){
			// 先计算yellowStarCount总数
			let yellowStarCount = parseInt(this.score/2);
			// 再计算greyStarCount总数
			let greyStarCount = 5 - yellowStarCount ;
			// 赋值
			this.yellowStarCount = yellowStarCount;
			this.greyStarCount = greyStarCount ;
		},
		methods: {
			
		},
		props:{
			score: {
				type: Number,
				default: 0
			}, // 总分十分
			showNum: 0  // 0不显示， 1显示
		}
	}
</script>

<style>

	.poster-score-wrapper{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.star-ico{
		width:22upx;
		height: 22upx;
		margin-right: 6upx;
	}
	
	.poster-score{
		margin-left: 6upx;
		font-size: 12px;
		color:grey;
	}
</style>
